<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>采购价添加页面</title>
		<%@ include file="../../common/jsp/header.jsp"%>
		<link href="${path }/static/css/plugins/file-input/fileinput.min.css" rel="stylesheet">
		<link rel="stylesheet" href="<%=path%>/static/css/plugins/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInRight">
			<div>
				<div class="col-sm-4"><input type="button" value="返回上一页" class="btn btn-success" onclick="javascript:history.back();"/></div>
			</div>
			<div class="ibox float-e-margins">
				<form action="${path }/purchase/create.do" method="post" class="form-horizontal" role="form">
                    <fieldset>
                        <legend>采购价基本信息</legend>
                       <div class="form-group">
						   <label class="col-sm-1 control-label" >采购组织</label>
						   <div class="col-sm-2">
							   <input class="form-control" type="text" id="supplierGroupName_show" name="supplierGroupName_show" value="请选择组织"/>

						   </div>
						   <div class="col-sm-1">
							   <input type="button" id="change_group" value="选择"/>
						   </div>

						   <label class="col-sm-1 control-label" >供应商</label>
						   <div class="col-sm-2">
							   <input class="form-control" type="text" id="supplierName_show" value="请选择供应商"/>
						   </div>
						   <div class="col-sm-1">
							   <input type="button" id="change_supplier" value="选择"/>
						   </div>

						   <label class="col-sm-1 control-label" >物资</label>
						   <div class="col-sm-2">
							   <input class="form-control" type="text" name="gamId"/>
						   </div>
					   </div>

						<div class="form-group">
                           <label class="col-sm-1 control-label" >计价单位</label>
                           <div class="col-sm-2">
                               <zhg:select codeTp="unit" name="chargeUnit" cls="form-control" def="true" id="chargeUnit" value=""></zhg:select>
                           </div>

                           <label class="col-sm-2 control-label" >物资分类</label>
                           <div class="col-sm-2">
                               <input class="form-control" type="text" name="gamType"/>
                           </div>
                           <label class="col-sm-2 control-label" >规格</label>
                           <div class="col-sm-2">
                               <input class="form-control" type="text" name="gamSize"/>
                           </div>
						</div>

						<div class="form-group">
							   <label class="col-sm-1 control-label" >价格组</label>
							   <div class="col-sm-2">
								   <input class="form-control" type="text" name="priceGroupId"/>
							   </div>
                       </div>

						<div class="form-group">
							<label class="col-sm-1 control-label" >价格表</label>
							<div class="col-sm-8">
							<table class="table table-hover" id="priceTab">
								<thead>
									<tr>
										<th>价格ID</th>
										<th>采购价</th>
										<th>生效日期</th>
										<th>失效日期</th>
										<th>增删行</th>
									</tr>
								</thead>
								<tbody id="priceTbody">
									<tr>
<%--										<td><input type="hidden1" id="basePriceId" name="basePriceId" value=""></td>--%>
										<td>0</td>
										<td><input type="text" id="priceValue" name="priceValue" value=""></td>
										<td><input type="date" id="priceSdate" name="priceSdate" value=""></td>
										<td><input type="date" id="priceEdate" name="priceEdate" value=""></td>
										<td>
											<button type="button" class="btn btn-default" id="tabAdd" onclick="addtr()" aria-label="Left Align">
												<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
											</button>
											<button type="button" class="btn btn-default" aria-label="Left Align" >
												<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
											</button>
										</td>
									</tr>
								</tbody>
							</table>
							</div>
						</div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group">
                        	<label class="col-sm-2 control-label" ></label>
                           	<div class="col-sm-2">
                              	<input type="submit" value="提交" class="btn btn-primary"/>
                           	</div>
                           	<label class="col-sm-2 control-label" ></label>
                           	<div class="col-sm-4">
                              	<input type="reset" value="重置" class="btn btn-danger" id="resetForm"/>
                           	</div>
                        </div>
                    </fieldset>
                </form>
			</div>
		</div>


		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">

                    <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">选择组织</h4>
						<input type="hidden1" id="supplierGroupId" name="supplierGroupId" value="">
						<input type="hidden1" id="supplierGroupName" name="supplierGroupName" value="">
                    </div>

                    <div class="modal-body">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <ul id="tree" class="ztree"></ul>
                        </table>
                    </div>

                </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
						<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
					</div>
				</div>
			</div>
		</div>

		<%--供应商弹窗--%>
		<div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">选择供应商</h4>
						<input type="hidden1" name="supplierId" id="supplierId" value="">
						<input type="hidden1" name="supplierName" id="supplierName" value="">
                    </div>

                    <div class="modal-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th></th>
								<th>编码</th>
								<th>名称</th>
								<th>缩写</th>
								<th>联系人</th>
								<th>电话</th>
							</tr>
						</thead>
						<tbody id="Supdata">
						<input type="checkbox" id="checkall"/>
							<%--表格数据--%>
						</tbody>
					</table>

						<input type="hidden1" id="supplierData" name="supplierData" value=""/>
                    </div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
					<button type="button" id="btn_submit2" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
				</div>
			</div>
		</div>
		</div>



	</body>
	<script type="text/javascript" src="${path }/static/js/plugins/file-input/fileinput.min.js"></script>
	<script type="text/javascript" src="./js/dictionary.js"></script>
	<script type="text/javascript" src="${path}/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="${path}/static/js/bootstrap.min.js"></script>
	<%--树的js插件--%>
	<script type="text/javascript" src="<%=path%>/static/js/plugins/ztree/jquery.ztree.core-3.5.js"></script>


	<%--组织和供应商的弹窗--%>
	<script type="text/javascript">
		$("#change_group").click(function () {
			$("#myModalLabel").text("选择组织");
			$('#myModal').modal();
		});

		$("#change_supplier").click(function () {
			$("#myModalLabel2").text("选择供应商");
			$('#myModa2').modal();
		});
	</script>

	<script language="JavaScript">
		var tdStr = '';
		$(function () {
			/*供应商查询*/

				alert("调用querySupplier方法");
				$.post(root+'purchase/querySupplier.do',function (data) {

					$.each(data,function (index,element) {
						// alert(element.SUPPLIERCODE);
						tdStr += "<tr><td><input type='checkbox' id='"+element.SUPPLIERID+"' name='ids' value='"+element.SUPPLIERNAME+" ' /></td>";
						tdStr += "<td>"+element.SUPPLIERCODE+"</td>";
						tdStr += "<td>"+element.SUPPLIERNAME+"</td>";
						tdStr += "<td>"+element.SUPPLIERABBNAME+"</td>";
						tdStr += "<td>"+element.SUPPLIERCONTACT+"</td>";
						tdStr += "<td>"+element.SUPPLIERCONTACTTEL+"</td></tr>";
					})
					$("#Supdata").append(tdStr);
				});



			$("#Supdata").on('click','input[name=ids]',function () {
				alert(this.id);
				// var length = $('#Supdata input[name=ids]:checked').length;
				// var length1 = $('#Supdata input[name=ids]').length;
				// alert(length1);
				// alert(length);
				//实现全选反选功能
				if($('#Supdata input[name=ids]').length == $('#Supdata input[name=ids]:checked').length)
				{
					/*全选*/
					$('#checkall').prop('checked', true);
				}
				else
				{
					$('#checkall').prop('checked', false);
				}
				//供应商名字回显
				var ids_checked= $('#Supdata input[name=ids]:checked');
				var ids = "";
				$.each(ids_checked,function () {
					ids+=this.value;
				})
				alert(ids);
				$("#supplierName").val(ids);
			})

			//点击页面实现全选,反选功能
			$('#checkall').click(function()
			{
				$('#Supdata input[name=ids]').prop('checked', $(this).prop('checked'));
			});

			$('#btn_submit2').click(function () {
				var ids = $('#supplierName').val();
				$('#supplierName_show').val(ids);
			})

		// })

	<%--树的js方法--%>

		// $(function () {
			var tree;
			var setting = {
				data: {
					simpleData: {
						enable: true
					}
				},
				view: {
					fontCss: getFontCss
				},
				callback: {
					onClick: onClick
				}
			};
			$.post(root+'group/queryAllOrg.do',function (zNodes) {
				tree = $.fn.zTree.init($("#tree"), setting, zNodes);
			},'json');

			$('#queryByOrgName').click(function () {
				var groupName = $("#groupName").val();
				var node = tree.getNodeByParam("name",groupName,"")
				node.highlight = true;
				tree.updateNode(node);
				tree.selectNode(node);
			})
			$('#btn_submit').click(function () {
				var thisName = $("#supplierGroupName").val();
				$("#supplierGroupName_show").val(thisName);


				/*$.post(root+'group/queryAllOrg.do',function (zNodes) {
					tree = $.fn.zTree.init($("#tree"), setting, zNodes);
				},'json');*/
				// var groupId=$('#supplierGroupId').val();

				var postData = {
					groupId :$('#supplierGroupId').val()
				}

				$.post(root+'supplier/querybyGroupId.do',postData,function (data) {
					$('#supplierData').val(data);
						tdStr = "";
					$.each(data,function (index,element) {
						// alert(element.SUPPLIERCODE);
						tdStr += "<tr><td><input type='checkbox' id='"+element.SUPPLIERID+"' name='ids' value='"+element.SUPPLIERNAME+" ' /></td>";
						tdStr += "<td>"+element.SUPPLIERCODE+"</td>";
						tdStr += "<td>"+element.SUPPLIERNAME+"</td>";
						tdStr += "<td>"+element.SUPPLIERABBNAME+"</td>";
						tdStr += "<td>"+element.SUPPLIERCONTACT+"</td>";
						tdStr += "<td>"+element.SUPPLIERCONTACTTEL+"</td></tr>";
					})
					/*移除已有的数据，随后再追加新的数据*/
					$("#Supdata tr").remove();
					$("#Supdata").append(tdStr);
				})

			})
		})
		function getFontCss(treeId, treeNode) {
			return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
		}


		/*选中获取树的id*/
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("tree"),
					nodes = zTree.getSelectedNodes(),
					v = "";
			        id = "";

			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
				id += nodes[i].id + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			if (id.length > 0 ) id = id.substring(0, id.length-1);
			var nameObj = $("#nodeName");
			nameObj.attr("value", v);
			$("#supplierGroupId").val(id);
			$("#supplierGroupName").val(v);
		}
	</script>

	<%--表格动态增加删除--%>
	<script>
		//增加<tr/>
		function addtr() {
			var _len = $("#priceTbody tr").length;
			$("#priceTbody").append("" +
					"<tr id="+_len+" >"
					+"<td>"+_len+"</td>"
					+"<td><input type='text' id='priceValue' name='priceValue' value=''></td>"
					+"<td><input type='date' id='priceSdate' name='priceSdate' value=''></td>"
					+"<td><input type='date' id='priceEdate' name='priceEdate' value=''></td>"
					// +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"

					+"<td>" +
					"<button type='button' class='btn btn-default' id='tabAdd' aria-label='Left Align' onclick='addtr()'>" +
					"<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>" +
					"</button>"+"&nbsp"+

					"<button type='button' class='btn btn-default' aria-label='Left Align' onclick=\'deltr("+_len+")\'>" +
					"<span class='glyphicon glyphicon-minus' aria-hidden='true'></span>" +
					"</button>"+
					"</td>"+
					"</tr>"
			);
		}

		//删除<tr/>
		var deltr =function(index)
		{
			var _len = $("#priceTab tr").length;
			$("tr[id='"+index+"']").remove();//删除当前行
			for(var i=index+1,j=_len;i<j;i++)
			{
				var nextTxtVal = $("#desc"+i).val();
				$("tr[id=\'"+i+"\']")
						.replaceWith("<tr id="+(i-1)+" >"
								+"<td>"+(i-1)+"</td>"
								+"<td><input type='text' id='priceValue' name='priceValue' value='' ></td>"
								+"<td><input type='date' id='priceSdate' name='priceSdate' value=''></td>"
								+"<td><input type='date' id='priceEdate' name='priceEdate' value=''></td>"
								// +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"

								+"<td>" +
								"<button type='button' class='btn btn-default' name='tabAdd' aria-label='Left Align' >" +
								"<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>" +
								"</button>"+"&nbsp"+

								"<button type='button' class='btn btn-default' aria-label='Left Align' onclick=\'deltr("+(i-1)+")\'>" +
								"<span class='glyphicon glyphicon-minus' aria-hidden='true'></span>" +
								"</botton>"+
								"</td>"+
								"</tr>"
						);
			}

		}
	</script>

</html>